<template>
  <div class="mod-prod">
    <avue-crud ref="crud" :page="page" :data="dataList" :table-loading="dataListLoading" :permission="permission"
      :option="tableOption" @search-change="searchChange" @selection-change="selectionChange" @on-load="getDataList">
      <template slot="menuLeft">
        <!-- <el-button type="danger" @click="deleteHandle()" size="small" v-if="isAuth('operate:message:batchDelete')"
                  :disabled="dataListSelections.length <= 0">批量删除
                </el-button> -->
      </template>
      <template slot-scope="scope" slot="status">
        <el-tag v-if="scope.row.status === 1" size="small">审核并发布
        </el-tag>
        <el-tag v-else size="small">未审核
        </el-tag>
      </template>

      <template slot-scope="scope" slot="menu">
        <el-button type="primary" icon="el-icon-edit" size="small" v-if="isAuth('operate:message:reply')"
          @click="viewOrReplyHandle(scope.row, scope.index)">查看并回复
        </el-button>
        <el-button type="danger" icon="el-icon-delete" size="small" v-if="isAuth('operate:message:delete')"
          @click="deleteHandle(scope.row)">删除
        </el-button>
      </template>
    </avue-crud>

    <el-dialog title="查看并回复" :visible.sync="viewOrReplyVisible" width="60%" :before-close="viewOrReplyVisibleClose">

      <div class="view-or-reply" v-loading="infoDataLoading">

        <el-card shadow="never">
          <div slot="header">
            <div style="display: flex;justify-content:space-around" class="title">
              <div><span>留言类型：</span> <span>{{ infoData.msgTypeName }}</span></div>
              <div><span>姓名：</span> <span>{{ infoData.username }}</span></div>
              <div><span>手机号码：</span> <span>{{ infoData.phone }}</span></div>
              <div><span>企业：</span> <span>{{ infoData.company }}</span></div>
              <div><span>创建时间：</span> <span>{{ infoData.createTime }}</span></div>
            </div>
          </div>
          <div class="content-list" style="overflow-y:auto;height:400px;">
            <div v-for="(item, index) in infoDataList" :key="index">


              <div class="content-item" v-if="item.userType === 0">
                <!--                 名字和时间-->
                <div class="user-info"><span>{{ item.userName }}</span> <span>{{ item.createTime }}</span></div>
                <div class="msg-content">
                  {{ item.content }}
                </div>
              </div>

              <div class="my-content-item" v-else>
                <!--                 名字和时间-->
                <div class="user-info"><span>{{ item.createTime }}</span> <span>{{ item.userName }}</span></div>
                <div class="msg-content">
                  {{ item.content }}
                </div>
              </div>

            </div>
          </div>
        </el-card>

      </div>

      <span slot="footer" class="dialog-footer">
        <!--    <el-button @click="dialogVisible = false">取 消</el-button>-->
        <!--          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
        <div style="display: flex">
          <el-input type="textarea" placeholder="请输入内容" style="width: 90%" v-model="sendValue">

          </el-input>
          <el-button v-loading="sendButLoading" slot="append" type="primary" icon="el-icon-position"
            @click="sendMsg">发送</el-button>
        </div>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { tableOption } from '@/crud/operate/message'

export default {
  data() {
    return {
      dataForm: {
        prodName: ''
      },
      permission: {
        delBtn: this.isAuth('prod:prod:delete')
      },
      dataList: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      dataListSelections: [],
      dataListLoading: false,
      tableOption: tableOption,
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      viewOrReplyVisible: false,
      infoDataList: [],
      infoDataLoading: false,
      infoData: {},
      sendValue: '',
      sendButLoading: ''

    }
  },

  methods: {
    // 获取数据列表
    getDataList(page, params, done) {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/msg/page'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign(
            {
              current: page == null ? this.page.currentPage : page.currentPage,
              size: page == null ? this.page.pageSize : page.pageSize
            },
            params
          )
        )
      }).then(({ data }) => {
        this.dataList = data.records
        // for (const key in this.dataList) {
        //   if (this.dataList.hasOwnProperty(key)) {
        //     const element = this.dataList[key]
        //     // element.imgs = element.imgs.split(',')[0]
        //   }
        // }
        this.page.total = data.total
        this.dataListLoading = false
        if (done) {
          done()
        }
      }).catch(() => {
        this.dataListLoading = false
        if (done) {
          done()
        }
      })
    },
    // 新增 / 修改
    viewOrReplyHandle(row, index) {
      this.viewOrReplyVisible = true
      // this.$refs.crud.rowEdit(row, index)
      // this.$router.push({
      //   path: '/prodInfo',
      //   query: { addmsg: id }
      // })
      this.infoData = row
      this.getMsgInfoList()
    },
    // 删除和批量删除
    deleteHandle(row) {
      console.log(row.msgId)
      // let prodIds = this.getSeleProdIds()
      // if (id) {
      //   prodIds.push(id)
      // }
      // url: this.$http.adornUrl(`/msg`),
      //       method: 'delete',
      //       data: this.$http.adornData(prodIds, false)
      this.$confirm(`确定进行[${row.msgId ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl('/msg/' + row.msgId),
            method: 'delete',
            data: this.$http.adornData({})
          }).then(({ data }) => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList(this.page)
              }
            })
          })
        })
        .catch(() => {
        })
    },
    // 条件查询
    searchChange(params, done) {
      this.getDataList(this.page, params, done)
    },
    // 多选变化
    selectionChange(val) {
      this.dataListSelections = val
    },
    // 获取选中的商品Id列表
    getSeleProdIds() {
      return this.dataListSelections.map(item => {
        return item.prodId
      })
    },
    /**
     * 查询留言信息
     */
    getMsgInfoList() {
      this.infoDataLoading = true
      this.$http({
        url: this.$http.adornUrl('/msgSub/page'),
        method: 'get',
        params: {
          current: 1,
          size: 999,
          msgId: this.infoData.msgId

        }
      }).then(({ data }) => {
        this.infoDataList = data.records
        this.infoDataLoading = false
        this.scrollToBottom()
      }).catch(() => {
        this.infoDataLoading = false
      })
    },
    /**
     * 关闭窗口hook
     */
    viewOrReplyVisibleClose() {
      this.viewOrReplyVisible = false
      this.infoDataList = []
      this.infoData = {}
      this.sendValue = ''
    },
    /**
     * 发送留言
     */
    sendMsg() {
      this.sendButLoading = true
      this.$http({
        url: this.$http.adornUrl('/msgSub'),
        method: 'post',
        data: this.$http.adornData({
          content: this.sendValue,
          msgId: this.infoData.msgId

        })
      }).then(({ data }) => {
        this.$message.success('发送留言成功')
        this.getMsgInfoList()
        this.sendButLoading = false
        this.sendValue = ''
      }).catch(() => {
        this.sendButLoading = false
      })
    },
    /**
     * 保持滚动条在最底部
     */
    scrollToBottom() {
      this.$nextTick(() => {
        let chat = this.$el.querySelector('.content-list')
        chat.scrollTop = chat.scrollHeight
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.view-or-reply {
  .title {
    div> :first-child {
      font-size: 14px;
    }

    div> :last-child {
      font-size: 12px;
    }
  }

  .content-list {
    padding-right: 6px;
    margin: auto;
    width: 880px;

    .content-item {
      .user-info {
        margin-bottom: 10px;

        :first-child {
          font-size: 20px;
          margin-right: 6px;
        }

        :last-child {}
      }

      .msg-content {
        display: inline-flex;
        padding: 10px;
        max-width: 400px;
        background-color: #f5f5f5;
        border-radius: 10px;
        box-shadow: 5px 5px 10px #888888;
        margin-bottom: 20px;
      }
    }

    .my-content-item {
      text-align: right;

      .user-info {
        margin-bottom: 10px;

        :first-child {}

        :last-child {
          font-size: 20px;
          margin-right: 6px;
        }
      }

      .msg-content {
        display: inline-flex;
        max-width: 400px;
        padding: 10px;
        background-color: #f5f5f5;
        border-radius: 10px;
        box-shadow: 5px 5px 10px #888888;
        margin-bottom: 20px;
      }
    }
  }

  .content-list::-webkit-scrollbar {
    width: 10px !important;
    height: 1px !important;
  }

  .content-list::-webkit-scrollbar-thumb {
    border-radius: 10px !important;
    background-color: skyblue !important;
  }

  .content-list::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #ededed;
    border-radius: 10px;
  }
}
</style>